<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box moveUp">
    <div class="fill">
      <span>点我啊!</span>
      <span>搞神魔咧!</span>
    </div>
  </div>
  <div class="pic">

  </div>
</body>
<script>
  var test = [123, "webank", [1,2,3], "123", {a:1}, "tencent", 123, [1,2,3], {a:1}]

  function uniqObjInArray(objarray) {
    let len = objarray.length;
    let tempJson = {

    };
    let res = [];
    for (let i = 0; i < len; i++) {
      //取出每一个对象
      tempJson[JSON.stringify(objarray[i])] = true;
    }
    console.log(tempJson)
    let keyItems = Object.keys(tempJson);
    for (let j = 0; j < keyItems.length; j++) {
      res.push(JSON.parse(keyItems[j]));
    }
    return res;
  }
  console.log(  uniqObjInArray(test)  )
</script>
<style>
  .box {
    margin-top: 100px;
    margin-left: 100px;
    background-color: rgba(130, 130, 130, 0.458);
    height: 100px;
    width: 100px;
  }

  .fill {
    width: 100px;
    height: 100px;
    background: #03A9F4;
    display: flex;
  }

  .moveUp:hover .fill {
    transition: 0.5s;
    /* transform: translate(50%, 50%); */
    transform: rotate(225deg);
  }

  .moveUp .fill span:nth-of-type(1) {
    display: block;
    margin: auto;
  }

  .moveUp:hover .fill span:nth-of-type(1) {
    display: none;
  }

  .fill span:nth-of-type(2) {
    display: none;
  }

  .moveUp:hover .fill span:nth-of-type(2) {
    display: block;
    margin: auto;
    color: rgb(144, 12, 12);
  }

  .pic {
    width: 800px;
    height: 600px;
    background-image: url(/手写/pic/8bq.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .5s;
  }

  .pic:hover {
    background-image: url(/手写/pic/8bqp1.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
</style>

</html>